<template>
	<div
		v-loading="loading"
		class="home-container"
		ref="container"
		@wheel="handleWheel"
	>
		<ul
			class="item-container"
			:style="{
				marginTop,
			}"
			@transitionend="moving = false"
		>
			<li v-for="item in datas" :key="item.id">
				<ItemContainer :banner="item" />
			</li>
		</ul>
		<div class="icon icon-up" @click="target(index - 1)" v-show="index > 0">
			<Icon type="arrowUp" />
		</div>
		<div
			class="icon icon-down"
			@click="target(index + 1)"
			v-show="index < datas.length - 1"
		>
			<Icon type="arrowDown" />
		</div>
		<ul class="indicator">
			<li
				:class="{ active: index === i }"
				v-for="(item, i) in datas"
				:key="item.id"
				@click="target(i)"
			></li>
		</ul>
	</div>
</template>

<script>
import ItemContainer from "./ItemContainer.vue";
import Icon from "@/components/Icon";
import { mapState } from "vuex";
export default {
	components: {
		ItemContainer,
		Icon,
	},
	data() {
		return {
			index: 0, //当前所处位置
			containerHeight: 0, //整个容器的高度
			moving: false, //当前是否正在移动
		};
	},
	methods: {
		//跳转到指定位置
		target(i) {
			this.index = i;
		},
		handleResize() {
			this.containerHeight = this.$refs.container.clientHeight;
		},
		handleWheel(e) {
			if (this.moving) {
				return;
			}
			if (e.deltaY < -5 && this.index > 0) {
				//往上滚动
				this.moving = true;
				this.index--;
			} else if (e.deltaY > 5 && this.index < this.datas.length - 1) {
				//往下滚动
				this.moving = true;
				this.index++;
			}
		},
	},
	created() {
		this.$store.dispatch("banner/fetchGetBanner");
	},
	computed: {
		//计算移动距离
		marginTop() {
			return -this.index * this.containerHeight + "px";
		},
		...mapState("banner", ["loading", "datas"]),
	},

	mounted() {
		//初始化容器高度
		this.containerHeight = this.$refs.container.clientHeight;
		//监听窗口大小改变事件,有可优化的地方
		window.addEventListener("resize", this.handleResize);
	},
	destroyed() {
		//销毁组件后解除绑定事件
		window.removeEventListener("resize", this.handleResize);
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.home-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden; //解决margin合并问题

	//测试
	// width: 60%;
	// height: 40%;
	// overflow: visible;
	// margin: 100px auto;
	// border: 1px solid pink;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.item-container {
		width: 100%;
		height: 100%;
		transition: 500ms;
		li {
			width: 100%;
			height: 100%;
		}
	}
	.icon {
		@gap: 25px;
		@jump: 5px;
		font-size: 20px;
		color: @gray;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		cursor: pointer;
		&-up {
			top: @gap;
			animation: jump-up 1s infinite;
		}
		&-down {
			bottom: @gap;
			animation: jump-down 1s infinite;
		}
		@keyframes jump-up {
			0% {
				transform: translateX(-50%) translateY(@jump);
			}
			50% {
				transform: translateX(-50%) translateY(-@jump);
			}
			100% {
				transform: translateX(-50%) translateY(@jump);
			}
		}
		@keyframes jump-down {
			0% {
				transform: translateX(-50%) translateY(-@jump);
			}
			50% {
				transform: translateX(-50%) translateY(@jump);
			}
			100% {
				transform: translateX(-50%) translateY(-@jump);
			}
		}
	}
	.indicator {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		li {
			transition: 500ms;
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: @words;
			cursor: pointer;
			margin-bottom: 10px;
			border: 1px solid #fff;
			&.active {
				background-color: #fff;
			}
		}
	}
}
</style>
